<script >
	import Router, {push} from 'svelte-spa-router';
	import routes from '../router/routes.js';
	// import { Router, Link, Route } from "svelte-navigator";
	// import { link } from 'svelte-spa-router';
	import User from '../view/user.svelte'
	import Temp from '../view/temp.svelte'
	import Login from '../view/login.svelte'

	import Tab, { Icon, Label } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import {logined} from "./main.js";
	import {isLogin} from "../store.js";
	let active = 'Home';
	let tabs = [
		{
			icon: 'access_time',
			label: 'Recents',
		},
		{
			icon: 'near_me',
			label: 'Nearby',
		},
		{
			icon: 'favorite',
			label: 'Favorites',
		},
	];
	// let active = tabs[0];

	// $:{
	// 	if(active==='Home'){
	// 		push('/chat')
	// 	}else if(active==='Merchandise'){
	// 		push('/user')
	// 	}
	// }

</script>

<main>
<!--	<div style="display: {$isLogin?'flex':'none'}">-->
<!--		<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>-->
<!--			&lt;!&ndash; Note: the `tab` property is required! &ndash;&gt;-->
<!--			<Tab {tab}>-->
<!--				<Label>{tab}</Label>-->
<!--			</Tab>-->
<!--		</TabBar>-->
<!--	</div>-->


	<Router {routes}/>
	<!--{#if login}-->
	<!--	<User></User>-->
	<!--{:else }-->
	<!--	<Login></Login>-->
	<!--{/if}-->
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	.useinput{
		display: flex;
		justify-content: center;
		margin-bottom: 10px
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>